import './DivBox.scss'
import { useState, useRef, useEffect } from 'react'
import { useEventEmitter, useRequest, useSetState, useSize } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { ICON } from '../../../../Common/Configure/Icon'
import { Initialization, InitializationData } from '../../../../Common/Mars3d/Initialization'
import { DatePicker, message, Result, Descriptions } from 'antd'
import { TitleSmall001 } from '../Common/SmallTitle'
import { TextList001 } from '../Common/TextList'
import { Video } from '../../../../Common/Configure/Video'

import { MonitorBox } from '../Template/Monitor'

import dayjs from 'dayjs'
import { useCallback } from 'react'
import { Annex } from '../../../../Common/Modal/ModalList/AnnexList'
import { ModalBox } from '../../../../Common/Modal/ModalBox'
import { project } from '../../../../Common/Data'
import { CommonSmallTitle, TitleSmall002 } from '../Common/SmallTitle'

import { Gauge, Area, Pie, Column } from '@ant-design/plots'

const { mars3d, Cesium } = window
const { imageUrl } = project[window.location.hostname]

const FrontTAPDetailsTypeList = {
    0: {
        url: 'getConstructionGetTension',
        columns: [
            // { label: '当前桥梁', value: Data[active.beamUuid] },
            { label: '张拉断面', value: 'tensioningSection' },
            { label: '张拉时间', value: 'tensioningDate' },
            { label: '张拉力0', value: 'tensioningForce0' },
            { label: '张拉力1', value: 'tensioningForce1' },
            { label: '张拉力2', value: 'tensioningForce2' },
            { label: '张拉力3', value: 'tensioningForce3' },
            { label: '张拉力4', value: 'tensioningForce4' },
            { label: '伸长量0', value: 'elongation0' },
            { label: '伸长量1', value: 'elongation1' },
            { label: '伸长量2', value: 'elongation2' },
            { label: '伸长量3', value: 'elongation3' },
            { label: '伸长量4', value: 'elongation4' },
            { label: '油压0', value: 'oilPressure0' },
            { label: '油压1', value: 'oilPressure1' },
            { label: '油压2', value: 'oilPressure2' },
            { label: '油压3', value: 'oilPressure3' },
            { label: '油压4', value: 'oilPressure4' },
            { label: '设计张拉控制力', value: 'theoreticalElongation' },
            { label: '总抻长量', value: 'totalElongation' },
        ],
        charts: [
            {
                title: '张拉曲线(Kn)',
                data: 'forceCurve',
                value: '力量',
                fill: 'l(270) 0:#ffffff 0.5:#bae0ff 1:#1677ff',
                color: '#1677ff',
            },
            {
                title: '伸长曲线(mm)',
                data: 'elongationCurve',
                value: '长度',
                fill: 'l(270) 0:#ffffff 0.5:#ffffb8 1:#fadb14',
                color: '#fadb14',
            },
        ],
    },
    1: {
        url: 'getConstructionGetLabPulping',
        columns: [
            // { label: '当前桥梁', value: Data[active.beamUuid] },
            { label: '压浆方向', value: 'pulpingOrientation' },
            { label: '压浆时间', value: 'loadHoldingTime' },
            { label: '配合比', value: 'mixProportion' },
            { label: '水胶比', value: 'waterBinderRatio' },
            { label: '搅拌时间', value: 'stirringTime' },
            { label: '开始时间', value: 'startDate' },
            { label: '结束时间', value: 'endDate' },
            { label: '进浆压力', value: 'pulpingPressureIn' },
            { label: '出浆压力', value: 'pulpingPressureOut' },
            { label: '进浆量', value: 'pulpingVolume' },
            { label: '理论浆量', value: 'standardVolume' },
        ],
        charts: [
            {
                title: '进浆压力曲线(Kn)',
                data: 'pressureInCurve',
                value: '力量',
                fill: 'l(270) 0:#ffffff 0.5:#bae0ff 1:#1677ff',
                color: '#1677ff',
            },
            {
                title: '进浆量曲线(L)',
                data: 'volumeCurve',
                value: '升',
                fill: 'l(270) 0:#ffffff 0.5:#ffffb8 1:#fadb14',
                color: '#fadb14',
            },
        ],
    },
}

const AreaFunc = ({ size, value, fill, color, data }) => {
    const { width, height } = size
    const list = data.split(',').map((item, index) => ({ type: index, [value]: Number(item) }))
    return {
        autoFit: false,
        data: list,
        width,
        height,
        appendPadding: 16,
        xField: 'type',
        yField: value,
        color: color,
        xAxis: { range: [0, 1], tickCount: 5 },
        areaStyle: () => ({ fill }),
    }
}

// 张拉压浆
export const FrontTAPDetails = ({ data }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const { uuid, type } = data.data
    const { url, columns, charts } = FrontTAPDetailsTypeList[type]
    const [CameraData, setCameraData] = useState()
    const [Active, setActive] = useState()
    const [Tabs, setTabs] = useState()

    const [Data, setData] = useState()
    const { runAsync: getCamera } = useRequest(Http, { manual: true })
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [{ children }] = res
            setTabs(
                children.map(item => ({
                    label: `${item.steelBeamNo}${item.tensioningSection ? item.tensioningSection : ''}`,
                    value: item.uuid,
                })),
            )
            setData(children)
            setActive(children[0].uuid)
        },
    })

    useEffect(() => {
        if (Active) {
            const { cameraUuids } = Data.find(v => v.uuid === Active)
            if (cameraUuids.length !== 0) {
                getCamera({ url: 'getCamera', data: { cameraUuid: cameraUuids[0] } }).then(res =>
                    setCameraData(res.list[0]),
                )
            }
        } else setCameraData()
    }, [Active, Data, getCamera])

    useEffect(() => {
        runAsync({ url, data: { pageIndex: 1, pageSize: 100000, beamModelCode: uuid } })
    }, [runAsync, url, uuid])

    return (
        <div className="FrontTAPDetails">
            {Tabs && Data?.length !== 0 ? (
                <div className="Box">
                    <div>
                        {Tabs.map(({ label, value }) => (
                            <div
                                key={value}
                                onClick={() => setActive(value)}
                                className={Active === value ? 'active' : ''}
                            >
                                {label}
                            </div>
                        ))}
                    </div>
                    <div>
                        <div>
                            <Descriptions bordered size="small" column={1}>
                                {columns.map(({ label, value }, index) => (
                                    <Descriptions.Item key={index} label={label}>
                                        {Data.find(v => v.uuid === Active)[value]}
                                    </Descriptions.Item>
                                ))}
                            </Descriptions>
                            <div> {CameraData ? <Video data={CameraData} /> : <Result title="暂无监控" />} </div>
                        </div>
                        <div>
                            {charts.map(({ title, data, ...item }, index) => (
                                <div key={index}>
                                    <TitleSmall001 title={title} />
                                    <div ref={ChartsBox}>
                                        {console.log(size)}
                                        {size && (
                                            <Area
                                                {...AreaFunc({
                                                    size,
                                                    ...item,
                                                    data: Data.find(v => v.uuid === Active)[data],
                                                })}
                                            />
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            ) : (
                <Result title="暂无数据" />
            )}
        </div>
    )
}

// 梁基本信息
export const BeamSliceDetail = ({ data, type }) => {
    const { uuid } = data.data
    const [Data, setData] = useState()
    const DataTwo = [
        { uuid: 1, label: 1, value: 'concreteStrength1' },
        { uuid: 2, label: 2, value: 'concreteStrength2' },
        { uuid: 3, label: 3, value: 'concreteStrength3' },
        { uuid: 4, label: '状态', value: 'auditStatus' },
    ]
    const DataTwoStatus = {
        1: { color: 'rgba(7, 193, 96, 1)', text: '合格' },
    }

    const Top = [
        { uuid: 1, label: '人员姓名', flex: 1, value: 'tableName' },
        { uuid: 2, label: '工种', flex: 1, value: 'personTypeName' },
    ]

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setData(res),
    })
    useEffect(() => {
        const data = type ? { BeamUuid: uuid } : { BeamModelCode: uuid }
        runAsync({ url: 'getConstructionGetOneBeamProduce', data })
    }, [runAsync, uuid, type])

    return (
        <>
            {Data && (
                <div className="BeamSliceDetail">
                    <div>
                        <div>
                            {Data.list[0].bridgeName} {Data.list[0].part}
                        </div>
                        <div>梁号: {Data.list[0].beamNo}</div>
                    </div>
                    <div>
                        <div>
                            <TitleSmall001 title="混凝土强度比(%)" />
                            <div>
                                {DataTwo.map(({ uuid, label, value }) => (
                                    <div key={uuid}>
                                        <div>{label}</div>
                                        <div>
                                            {(() => {
                                                if (value === 'auditStatus') {
                                                    const { color, text } = DataTwoStatus[Data.list[0][value]]
                                                    return <div style={{ color }}>{text}</div>
                                                } else {
                                                    return <div>{Data.list[0][value]}</div>
                                                }
                                            })()}
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <TitleSmall001 title="施工日期" />
                            <div>
                                {Data.list1.map(({ produceDate, tableName }, index) => (
                                    <div key={index}>
                                        <div>{tableName} : </div>
                                        <div>{produceDate} </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div>
                            <TitleSmall001 title="施工人员" />
                            <TextList001 Top={Top} data={Data.list2} />
                        </div>
                    </div>
                </div>
            )}
        </>
    )
}

// 标签基础信息
export const BeamPedestalDetail = ({ data }) => {
    const [Data, setData] = useState()
    const [Active, setActive] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setActive(res.list[0]?.uuid)
            setData(res.list)
        },
    })

    useEffect(() => {
        const { BeamModelCode, organizationUuid } = data.data
        runAsync({ url: 'getConstructionGetBeamProduceListByBeamModelCode', data: { BeamModelCode, organizationUuid } })
    }, [runAsync, data])

    return (
        <div className="BeamPedestalDetail">
            <div>
                {Data &&
                    Data.map(({ uuid, bridgeName, part, beamNo }) => (
                        <div key={uuid} onClick={() => setActive(uuid)} className={Active === uuid ? 'active' : ''}>
                            <div>{bridgeName}</div>
                            <div>
                                {part} {beamNo}
                            </div>
                        </div>
                    ))}
            </div>
            {Active && <BeamSliceDetail data={{ data: { uuid: Active } }} type />}
        </div>
    )
}

// 人员轨迹
const TrajectoryData = {
    startTime: dayjs().add(-1, 'day').format('YYYY-MM-DD') + ' 00:00:00',
    endTime: dayjs().format('YYYY-MM-DD') + ' 00:00:00',
    intervalTime: 20,
}

export const CommandTrajectory = ({ data }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const { ren, sceneId } = data.data
    const { deviceSerial, personName } = ren

    const [parameter, setParameter] = useSetState(TrajectoryData)

    const [Map, setMap] = useState()
    const [Gra, setGra] = useState()

    const Mars3dBox = useRef()
    const InitializationEvent = useEventEmitter()
    InitializationEvent.useSubscription(({ map, gra, uuid }) => {
        getScenesDetails({ url: `getScenesDetailsUuid`, path: [uuid] }).then(res => {
            InitializationData(map, gra, res)
            setGra(gra)
            setMap(map)
        })
    })
    const { runAsync } = useRequest(Http, { manual: true })
    const { runAsync: getScenesDetails } = useRequest(Http, { manual: true })
    const { run: getScenes } = useRequest(Http, {
        manual: true,
        onSuccess: res => Initialization(res, Mars3dBox, InitializationEvent),
    })
    useEffect(() => {
        getScenes({ url: `getScenesID`, path: [sceneId] })
    }, [getScenes, sceneId])

    const getTrajectory = useCallback(() => {
        runAsync({ url: 'getHelmetHistoryPositions', data: { ...parameter, deviceSerial: deviceSerial } }).then(res => {
            if (Gra.getGraphicById(deviceSerial)) {
                Gra.removeGraphic(Gra.getGraphicById(deviceSerial), true)
                Gra.removeGraphic(Gra.getGraphicById(`route-${deviceSerial}`), true)
            }
            if (res.length === 0) {
                messageApi.info('当前时段没有历史轨迹')
                return false
            }

            let linePosition = []
            const property = new Cesium.SampledPositionProperty()
            property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD
            let start
            let stop

            for (let i = 0, len = res.length; i < len; i++) {
                const item = res[i]
                const lng = Number(item.lon)
                const lat = Number(item.lat)
                const height = 220
                const time = dayjs(item.time).format()
                linePosition = [...linePosition, [lng, lat, 0]]
                let position = null
                let juliaDate = null
                if (lng && lat) position = Cesium.Cartesian3.fromDegrees(lng, lat, height)
                if (time) juliaDate = Cesium.JulianDate.fromIso8601(time)
                if (position && juliaDate) property.addSample(juliaDate, position)
                if (i === 0) {
                    start = juliaDate
                } else if (i === len - 1) {
                    stop = juliaDate
                }
            }

            // 设置时钟属性
            Map.clock.startTime = start.clone()
            Map.clock.stopTime = stop.clone()
            Map.clock.currentTime = start.clone()
            Map.clock.clockRange = Cesium.ClockRange.LOOP_STOP
            Map.clock.multiplier = 100
            if (Map.controls.timeline) Map.controls.timeline.zoomTo(start, stop)
            // 创建path对象

            const lienData = new mars3d.graphic.PolylineEntity({
                id: `route-${deviceSerial}`,
                positions: linePosition,
                style: { width: 3, color: '#ff0000', clampToGround: true },
            })

            const pathEntity = new mars3d.graphic.PathEntity({
                id: deviceSerial,
                position: property,
                orientation: new Cesium.VelocityOrientationProperty(property),
                style: {
                    resolution: 1,
                    leadTime: 0,
                    trailTime: 86400,
                    color: 'rgba(0,0,0,0)',
                    width: 3,
                },
                label: {
                    text: personName,
                    clampToGround: true,
                    visibleDepth: false,
                    pixelOffsetY: 30,
                    font_size: 18,
                    color: 'red',
                    font_family: '微软雅黑',
                    font_weight: 'bold ',
                    boderColor: '#15d1f2',
                    outline: true,
                    outlineColor: '#fff',
                    outlineWidth: 5,
                },
                model: {
                    url: '//data.mars3d.cn/gltf/mars/man/walk.gltf',
                    clampToGround: true,
                    minimumPixelSize: 50,
                },
            })
            Map.trackedEntity = undefined
            Map.flyToPoint(pathEntity.positionShow, { radius: 3000, heading: 143, pitch: -28 })
            Gra.addGraphic(lienData)
            Gra.addGraphic(pathEntity)
        })
    }, [runAsync, parameter, deviceSerial, Gra, Map, personName, messageApi])

    const onChange = e => {
        setParameter({
            startTime: dayjs(e).format('YYYY-MM-DD') + ' 00:00:00',
            endTime: dayjs(e).add(1, 'day').format('YYYY-MM-DD') + ' 00:00:00',
        })
    }

    useEffect(() => {
        if (Map && Gra) getTrajectory()
    }, [Map, Gra, getTrajectory])

    return (
        <div className="CommandTrajectory">
            {contextHolder}
            {parameter && (
                <div className="Label">
                    <div>回放日期 :</div>
                    <DatePicker value={dayjs(parameter.startTime)} onChange={onChange} format="YYYY-MM-DD" />
                </div>
            )}
            <div className="TrajectoryMap" ref={Mars3dBox} />
        </div>
    )
}

// 接口附件展示
export const APIAnnexModal = ({ data }) => {
    const { uuid } = data

    const [Url, setUrl] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.list.length !== 0) setUrl(res.list[0].fileUrl)
        },
    })

    useEffect(() => {
        runAsync({
            url: 'getInfoManageDetailByOrgAndType',
            data: {
                InfoTypeManageUuid: '825255bb-6a5e-4eea-861e-12a83496d6c4',
                pageIndex: 1,
                pageSize: 1,
                organizationUuid: uuid,
            },
        })
    }, [runAsync, uuid])

    return <>{Url ? <Annex data={{ url: Url }} /> : <Result status="500" title="文件格式不支持预览" />}</>
}

export const CameraModal = ({ data }) => {
    return (
        <div className="CameraModal">
            <MonitorBox OrgData={{ data: { IsAi: '1' } }} />
        </div>
    )
}

const InspectionDetailsStatus = {
    0: { title: '未整改', icon: ICON['IconAZuobiaoyoushujubeifen7'], color: '#48e482' },
    1: { title: '整改中', icon: ICON['IconAZuobiaoyoushujubeifen5'], color: '#81e23a' },
    2: { title: '已整改', icon: ICON['IconAZuobiaoyoushujubeifen3'], color: '#3ac0e2' },
    3: { title: '合格', icon: ICON['IconAZuobiaoyoushujubeifen4'], color: '#8a9db1' },
    4: { title: '不合格', icon: ICON['IconAZuobiaoyoushujubeifen6'], color: '#dce23a' },
}

export const InspectionDetails = ({ data }) => {
    const { data: Data } = data
    const {
        uuid,
        tableName,
        auditStatus,
        createUserName,
        organizationName,
        securityProblemTypeName,
        score,
        limitDays,
        securityDate,
        updateUserName,
        updateTime,
        problem,
    } = Data

    const [OptionsCall, setOptionsCall] = useState()

    const [Active, setActive] = useState(false)

    const [Annex, setAnnex] = useState([])
    const [Details, setDetails] = useState([])
    const [DetailsAnnex, setDetailsAnnex] = useState([])

    const { runAsync: getAnnex } = useRequest(Http, { manual: true, onSuccess: res => setAnnex(res.list) })
    const { runAsync: getDetai } = useRequest(Http, { manual: true, onSuccess: res => setDetails(res.list) })
    const { runAsync: getDetaiAnnex } = useRequest(Http, { manual: true, onSuccess: res => setDetailsAnnex(res.list) })

    useEffect(() => {
        getAnnex({ url: 'getSecurityAttachment', data: { SecurityUuid: uuid } })
        getDetai({ url: 'getSecurityDetail', data: { SecurityUuid: uuid } })
    }, [uuid, getAnnex, getDetai])

    useEffect(() => {
        if (Active) getDetaiAnnex({ url: 'getSecurityDetailAttachment', data: { SecurityDetailUuid: Active } })
    }, [Active, getDetaiAnnex])

    return (
        <div className="InspectionDetails">
            <div className="Top">
                <div className="Content">
                    <div className="Title">
                        <div>{tableName}</div>
                        <div style={{ color: InspectionDetailsStatus[auditStatus].color }}>
                            {InspectionDetailsStatus[auditStatus].icon}
                            {InspectionDetailsStatus[auditStatus].title}
                        </div>
                    </div>
                    <div className="List">
                        <div>
                            <div>下单人员 : </div>
                            <div>{createUserName}</div>
                        </div>
                        <div>
                            <div>整改人员 : </div>
                            <div>{organizationName}</div>
                        </div>
                        <div>
                            <div>安全类型 : </div>
                            <div>{securityProblemTypeName}</div>
                        </div>
                        <div>
                            <div>整改分数 : </div>
                            <div>{score}</div>
                        </div>
                        <div>
                            <div>整改天数 : </div>
                            <div>{limitDays}</div>
                        </div>
                        <div>
                            <div>巡检时间 : </div>
                            <div>{securityDate}</div>
                        </div>
                        <div>
                            <div>审核人员 : </div>
                            <div>{updateUserName}</div>
                        </div>
                        <div>
                            <div>审核时间 : </div>
                            <div>{updateTime}</div>
                        </div>
                        <div>
                            <div>问题描述 : </div>
                            <div>
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                                {problem}
                            </div>
                        </div>
                    </div>
                </div>
                {Annex.length !== 0 && (
                    <div className="Image">
                        {Annex.map(({ uuid, originalName, fileUrl }) => (
                            <div
                                key={uuid}
                                onClick={() =>
                                    setOptionsCall({
                                        type: 'Annex',
                                        data: { url: fileUrl, title: originalName, width: '90vw' },
                                    })
                                }
                            >
                                {ICON['chakan']}
                                <div>{originalName}</div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
            {Details.length !== 0 && (
                <div className="Btm">
                    {Details.map(({ uuid, tableName, createUserName, description, securityDetailDate }) => (
                        <div className="Details" key={uuid}>
                            <div className="Title" onClick={() => setActive(e => (uuid === e ? '' : uuid))}>
                                <div>{tableName}</div>
                                <div>{securityDetailDate}</div>
                            </div>
                            <div className={`Item ${Active === uuid ? 'Show' : 'Hidden'}`}>
                                <div className="List">
                                    <div>
                                        <div>整改人员 : </div>
                                        <div>{createUserName}</div>
                                    </div>
                                    <div>
                                        <div>整改时间 : </div>
                                        <div>{securityDetailDate}</div>
                                    </div>
                                    <div>
                                        <div>整改描述 : </div>
                                        <div>{description}</div>
                                    </div>
                                </div>
                                {DetailsAnnex.length !== 0 && (
                                    <div className="Image">
                                        {DetailsAnnex.map(({ uuid, originalName, fileUrl }) => (
                                            <div
                                                key={uuid}
                                                onClick={() =>
                                                    setOptionsCall({
                                                        type: 'Annex',
                                                        data: { url: fileUrl, title: originalName, width: '90vw' },
                                                    })
                                                }
                                            >
                                                {ICON['chakan']}
                                                <div>{originalName}</div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            )}

            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

const RiskType = {
    '9c256a7d-ae64-4fcc-a4bc-7edff75599f3': '重大风险',
    'a17b2c16-668e-4449-b793-1487ba698e77': '较大风险',
    'b75a2f2f-e107-459a-a331-35bd9924a2b7': '一般风险',
    '4d3fd238-6473-429a-a1ab-8f35c6af97ab': '较低风险',
}

export const RiskDetailsBox = ({ data }) => {
    const { uuid, tableName, organizationName, superviseTypeUuid } = data.data
    const [OptionsCall, setOptionsCall] = useState()
    const [Annex, setAnnex] = useState([])
    const [Video, setVideo] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list, list1 } = res
            setAnnex(list)
            setVideo(list1)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getJTGJSuperviseDetail', data: { uuid } })
    }, [runAsync, uuid])

    return (
        <div className="RiskDetailsBox">
            <div className="Top">
                <div className="Text">
                    <div>
                        <div>组织机构 : </div>
                        <div>{organizationName}</div>
                    </div>
                    <div>
                        <div>风险名称 : </div>
                        <div>{tableName}</div>
                    </div>
                    <div>
                        <div>风险类别 : </div>
                        <div>{RiskType[superviseTypeUuid]}</div>
                    </div>
                </div>
                {Annex.length !== 0 && (
                    <div className="Image">
                        {Annex.map(({ uuid, tableName, fileUrl }) => (
                            <div
                                key={uuid}
                                onClick={() =>
                                    setOptionsCall({
                                        type: 'Annex',
                                        data: { url: fileUrl, title: tableName, width: '90vw' },
                                    })
                                }
                            >
                                {ICON['chakan']}
                                <div>{tableName}</div>
                            </div>
                        ))}
                    </div>
                )}

                {Video.length !== 0 && (
                    <div className="Image">
                        {Video.map(data => (
                            <div
                                key={data.uuid}
                                onClick={() =>
                                    setOptionsCall({
                                        type: 'MonitoringModal',
                                        data: { data, title: data.tableName, width: '90vw' },
                                    })
                                }
                            >
                                {ICON['Iconhome23']}
                                <div>{data.tableName}</div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const ImageBox = ({ data }) => {
    return <img src={data.url} alt="" />
}

export const SecurityActivityDetailBox = ({ data }) => {
    const { uuid, organizationName, tableName, interval, startTime, endTime } = data.data

    const [OptionsCall, setOptionsCall] = useState()
    const [Annex, setAnnex] = useState([])
    const [Person, setPerson] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log('安全附件', res)
            const { list, list1 } = res
            setAnnex(list)
            setPerson(list1)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getSecurityActivityDetail', data: { uuid } })
    }, [runAsync, uuid])

    return (
        <div className="SecurityActivityDetailBox">
            <div className="Text">
                <div>
                    <div>组织机构 : </div>
                    <div>{organizationName}</div>
                </div>
                <div>
                    <div>活动名称 : </div>
                    <div>{tableName}</div>
                </div>
                <div>
                    <div>开始时间 : </div>
                    <div>{startTime}</div>
                </div>
                <div>
                    <div>结束时间 : </div>
                    <div>{endTime}</div>
                </div>
                <div>
                    <div>活动时长 : </div>
                    <div>{interval}</div>
                </div>
            </div>

            {Annex.length !== 0 && (
                <div className="Image">
                    {Annex.map(({ uuid, tableName, fileUrl }) => (
                        <div
                            key={uuid}
                            onClick={() =>
                                setOptionsCall({
                                    type: 'Annex',
                                    data: { url: fileUrl, title: tableName, width: '90vw' },
                                })
                            }
                        >
                            {ICON['chakan']}
                            <div>{tableName}</div>
                        </div>
                    ))}
                </div>
            )}

            {Person.length !== 0 && (
                <div className="Person">
                    {Person.map(({ uuid, tableName1 }) => (
                        <div key={uuid}>{tableName1}</div>
                    ))}
                </div>
            )}

            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const AiDetailsModal = ({ data }) => {
    const {
        organizationUuid,
        device,
        algorithmName,
        logTime,
        handleTime,
        handled,
        remark,
        originalPictureUrl,
        resultPictureUrl,
        aiPictureAttachment,
    } = data.data

    const [OrgList, setOrgList] = useState({})

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setOrgList(res.list.reduce((acc, { uuid, tableName }) => ({ ...acc, [uuid]: tableName }), {})),
    })

    useEffect(() => {
        runAsync({ url: 'getOrganizations' })
    }, [runAsync])

    return (
        <div className="AiDetailsModal">
            <img src={imageUrl + 'AILeft.png'} alt="" />
            <div>
                <div>
                    <div>
                        <div>项目名称 : </div>
                        <div>{OrgList[organizationUuid] || '-'}</div>
                    </div>
                    <div>
                        <div>位置 : </div>
                        <div>{device?.location || '-'}</div>
                    </div>
                    <div>
                        <div>负责人 : </div>
                        <div>{device?.manager || '-'}</div>
                    </div>
                    <div>
                        <div>预警类型 : </div>
                        <div>{algorithmName || '-'}</div>
                    </div>
                    <div>
                        <div>处理情况 : </div>
                        <div>{handled === 1 ? '已处理' : '未处理'}</div>
                    </div>
                    <div>
                        <div>发现日期 : </div>
                        <div>{logTime || '-'}</div>
                    </div>
                    <div>
                        <div>处理日期 : </div>
                        <div>{handleTime || '-'}</div>
                    </div>
                    <div>
                        <div>原因 : </div>
                        <div>{remark || '-'}</div>
                    </div>
                </div>
                <div>
                    <div>
                        <div>AI发现问题图片</div>
                        <img src={resultPictureUrl} alt="" />
                    </div>
                    <div>
                        <div>负责人处理后图片</div>
                        <img src={aiPictureAttachment?.attachment?.fileUrl} alt="" />
                    </div>
                </div>
            </div>
        </div>
    )
}

export const PersonDetailsModal = ({ data }) => {
    console.log(data.data)
    return <div className="PersonDetailsModal">人员档案</div>
}

export const JTGJThrDataFou = () => {
    const TwoOne = useRef()
    const TwoOneSize = useSize(TwoOne)

    const ThrBox = useRef()
    const ThrBoxSize = useSize(ThrBox)

    const dataOne = [
        { uuid: 1, label: '下单数', value: Math.floor(Math.random() * 100) + 1, color: '#00F2DC', img: 'ThrIcon1.png' },
        { uuid: 2, label: '合格数', value: Math.floor(Math.random() * 100) + 1, color: '#00F25A', img: 'ThrIcon2.png' },
        { uuid: 3, label: '不合格', value: Math.floor(Math.random() * 100) + 1, color: '#FFA750', img: 'ThrIcon3.png' },
        { uuid: 4, label: '已整改', value: Math.floor(Math.random() * 100) + 1, color: '#37D4F2', img: 'ThrIcon4.png' },
        { uuid: 5, label: '整改中', value: Math.floor(Math.random() * 100) + 1, color: '#71FFE4', img: 'ThrIcon5.png' },
        { uuid: 6, label: '未整改', value: Math.floor(Math.random() * 100) + 1, color: '#FFEE8C', img: 'ThrIcon6.png' },
    ]

    const dataTwo = [
        { uuid: 1, label: '已处置', value: Math.floor(Math.random() * 100) + 1, color: '#ACFF9C', unit: '个' },
        { uuid: 2, label: '已复查', value: Math.floor(Math.random() * 100) + 1, color: '#FF9B40', unit: '个' },
        { uuid: 3, label: '超期预警', value: Math.floor(Math.random() * 100) + 1, color: '#ACFF9C', unit: '个' },
        { uuid: 4, label: '信息推送', value: Math.floor(Math.random() * 100) + 1, color: '#FF9B40', unit: '次' },
    ]

    const linkData = [
        { label: '1', value: Math.floor(Math.random() * 100) + 1 },
        { label: '2', value: Math.floor(Math.random() * 100) + 1 },
        { label: '3', value: Math.floor(Math.random() * 100) + 1 },
        { label: '4', value: Math.floor(Math.random() * 100) + 1 },
        { label: '5', value: Math.floor(Math.random() * 100) + 1 },
        { label: '6', value: Math.floor(Math.random() * 100) + 1 },
        { label: '7', value: Math.floor(Math.random() * 100) + 1 },
        { label: '8', value: Math.floor(Math.random() * 100) + 1 },
        { label: '9', value: Math.floor(Math.random() * 100) + 1 },
        { label: '10', value: Math.floor(Math.random() * 100) + 1 },
        { label: '11', value: Math.floor(Math.random() * 100) + 1 },
        { label: '12', value: Math.floor(Math.random() * 100) + 1 },
        { label: '13', value: Math.floor(Math.random() * 100) + 1 },
        { label: '14', value: Math.floor(Math.random() * 100) + 1 },
        { label: '15', value: Math.floor(Math.random() * 100) + 1 },
        { label: '16', value: Math.floor(Math.random() * 100) + 1 },
        { label: '17', value: Math.floor(Math.random() * 100) + 1 },
        { label: '18', value: Math.floor(Math.random() * 100) + 1 },
        { label: '19', value: Math.floor(Math.random() * 100) + 1 },
        { label: '20', value: Math.floor(Math.random() * 100) + 1 },
    ]

    const dataThr = [
        { uuid: 1, label: '一般隐患', value: Math.floor(Math.random() * 100) + 1, color: '#8FED7D', unit: '次' },
        { uuid: 2, label: '严重隐患', value: Math.floor(Math.random() * 100) + 1, color: '#28EAE8', unit: '次' },
        { uuid: 3, label: '较大隐患', value: Math.floor(Math.random() * 100) + 1, color: '#6FB0FF', unit: '次' },
        { uuid: 4, label: '重大隐患', value: Math.floor(Math.random() * 100) + 1, color: '#FF9393', unit: '次' },
    ]

    const PieData = [
        { type: '一般隐患', value: Math.floor(Math.random() * 100) + 1 },
        { type: '严重隐患', value: Math.floor(Math.random() * 100) + 1 },
        { type: '较大隐患', value: Math.floor(Math.random() * 100) + 1 },
        { type: '重大隐患', value: Math.floor(Math.random() * 100) + 1 },
    ]

    const dataFou = [
        { uuid: 1, label: '重大隐患综合报告 3', value: '2022-12-13' },
        { uuid: 2, label: '重大隐患综合报告 2', value: '2022-12-13' },
        { uuid: 3, label: '重大隐患综合报告 1', value: '2022-12-13' },
    ]

    const dataFiv = [
        {
            uuid: 1,
            label: '整改视频',
            value: Math.floor(Math.random() * 100) + 1,
            color: '#FFC825',
            img: 'ThrImg1.png',
        },
        {
            uuid: 2,
            label: '整改文件',
            value: Math.floor(Math.random() * 100) + 1,
            color: '#00F1CE',
            img: 'ThrImg2.png',
        },
        {
            uuid: 3,
            label: '整改图片',
            value: Math.floor(Math.random() * 100) + 1,
            color: '#70CDFF',
            img: 'ThrImg3.png',
        },
        { uuid: 4, label: '其他', value: Math.floor(Math.random() * 100) + 1, color: '#FF8627', img: 'ThrImg4.png' },
    ]

    const ColumnData = [
        { label: 'A1', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'A2', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'A4', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'A5', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'A6', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'A7', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'A8', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'B1', value: Math.floor(Math.random() * 100) + 1 },
        { label: 'B2', value: Math.floor(Math.random() * 100) + 1 },
    ]

    return (
        <div className="JTGJThrDataFou">
            <CommonSmallTitle title="预警管理" flex={464} style={{ marginRight: 16 }}>
                <div className="one">
                    <Gauge
                        {...{
                            autoFit: false,
                            width: 200,
                            height: 200,
                            percent: 0.9,
                            radius: 0.9,
                            startAngle: Math.PI,
                            endAngle: 2 * Math.PI,
                            range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
                            indicator: null,
                            statistic: {
                                title: {
                                    offsetY: -25,
                                    style: {
                                        fontSize: '35px',
                                        color: '#fff',
                                        fontWeight: 'bold',
                                        fontFamily: 'Bahnschrift',
                                    },
                                    formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
                                },
                                content: {
                                    style: {
                                        fontSize: '16px',
                                        color: '#60EAFF',
                                        fontWeight: 'bold',
                                        fontFamily: 'PingFang',
                                    },
                                    formatter: () => '整改率',
                                },
                            },
                            gaugeStyle: { lineCap: 'round' },
                        }}
                    />
                    <div className="dataOne">
                        {dataOne.map(({ uuid, label, value, color, img }) => (
                            <div key={uuid}>
                                <img src={imageUrl + img} alt="" />
                                <div style={{ color }}>{label}</div>
                                <div>{value}个</div>
                            </div>
                        ))}
                    </div>
                </div>
            </CommonSmallTitle>
            <div className="Right">
                <CommonSmallTitle title="隐患及预警管理" style={{ marginBottom: 16 }}>
                    <div className="two">
                        <div>
                            <div>
                                <div>{Math.floor(Math.random() * 100) + 1}</div>
                                <img src={imageUrl + 'ThrTopOne.png'} alt="" />
                                <div>安全隐患数量</div>
                            </div>
                            <div>
                                {dataTwo.map(({ uuid, label, value, color, unit }) => (
                                    <div key={uuid}>
                                        <div style={{ color }}>{label}</div>
                                        <div>
                                            {value}
                                            {unit}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div className="Charts" ref={TwoOne}>
                            {TwoOneSize && (
                                <Area
                                    {...{
                                        autoFit: false,
                                        width: TwoOneSize.width,
                                        height: TwoOneSize.height,
                                        maxColumnWidth: 14,
                                        appendPadding: 24,
                                        data: linkData,
                                        // isGroup,
                                        isStack: true,
                                        xField: 'label',
                                        yField: 'value',
                                        color: '#FFD47B',
                                        label: {
                                            position: 'top',
                                            style: { fill: '#FFFFFF', opacity: 1 },
                                        },
                                        legend: {
                                            layout: 'horizontal',
                                            position: 'top-right',
                                            offsetY: 24,
                                            itemName: { style: { fill: 'white', fontSize: 12 } },
                                        },
                                        xAxis: {
                                            label: { style: { fill: '#B2FBFD' } },
                                            line: { style: { stroke: '#B2FBFD' } },
                                            tickLine: { style: { stroke: '#B2FBFD' } },
                                        },
                                        yAxis: {
                                            title: {
                                                text: '次',
                                                position: 'end',
                                                autoRotate: false,
                                                offset: 50,
                                                style: { fill: '#B2FBFD' },
                                            },
                                            tickCount: 5,
                                            label: { style: { fill: '#B2FBFD' } },
                                            grid: {
                                                line: {
                                                    style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] },
                                                },
                                            },
                                        },
                                    }}
                                />
                            )}
                        </div>
                        <div>
                            <div>
                                <div>
                                    {dataThr.map(({ uuid, label, value, color, unit }) => (
                                        <div key={uuid}>
                                            <div style={{ color }}>{label}</div>
                                            <div>
                                                {value}
                                                {unit}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                <Pie
                                    {...{
                                        data: PieData,
                                        angleField: 'value',
                                        colorField: 'type',
                                        width: 160,
                                        height: 160,
                                        radius: 1,
                                        color: ['#8FED7D', '#28EAE8', '#6FB0FF', '#FF9393'],
                                        label: {
                                            type: 'inner',
                                            offset: '-30%',
                                            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                                            style: { fontSize: 14, textAlign: 'center' },
                                        },
                                        tooltip: false,
                                        legend: false,
                                        interactions: [{ type: 'element-active' }],
                                    }}
                                />
                            </div>
                            <div>
                                <TitleSmall002 title="巡查记录留档" />
                                <div>
                                    {dataFou.map(({ uuid, label, value }) => (
                                        <div key={uuid}>
                                            <div>{label}</div>
                                            <div>{value}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="整改日志">
                    <div className="thr">
                        <div>
                            {dataFiv.map(({ uuid, label, value, color, img }) => (
                                <div key={uuid}>
                                    <div>
                                        <img src={imageUrl + img} alt="" />
                                    </div>
                                    <div>
                                        <div style={{ color }}>{value}%</div>
                                        <div>{label}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div ref={ThrBox}>
                            {ThrBoxSize && (
                                <Column
                                    {...{
                                        autoFit: false,
                                        width: ThrBoxSize.width,
                                        height: ThrBoxSize.height,
                                        maxColumnWidth: 14,
                                        appendPadding: 24,
                                        data: ColumnData,
                                        isGroup: true,
                                        xField: 'label',
                                        yField: 'value',
                                        color: '#B2FBFD',
                                        label: {
                                            position: 'top',
                                            style: { fill: '#FFFFFF', opacity: 1 },
                                        },
                                        legend: {
                                            layout: 'horizontal',
                                            position: 'top',
                                            offsetX: -24,
                                            itemName: { style: { fill: 'white', fontSize: 12 } },
                                        },
                                        xAxis: {
                                            label: { style: { fill: '#B2FBFD' } },
                                            line: { style: { stroke: '#B2FBFD' } },
                                            tickLine: { style: { stroke: '#B2FBFD' } },
                                        },
                                        yAxis: {
                                            tickCount: 5,
                                            label: { style: { fill: '#B2FBFD' } },
                                            grid: {
                                                line: {
                                                    style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] },
                                                },
                                            },
                                        },
                                        scrollbar: {
                                            type: 'horizontal',
                                            categorySize: 60,
                                            style: {
                                                trackColor: 'rgba(178, 251, 253, 0.2)',
                                                thumbColor: 'rgba(178, 251, 253, 1)',
                                                thumbHighlightColor: '#367EF2',
                                            },
                                        },
                                    }}
                                />
                            )}
                        </div>
                    </div>
                </CommonSmallTitle>
            </div>
        </div>
    )
}
